<template>
    <div class="full-w full-h flex-center flex-box">
        <div class="flex-left">
            <ul>
                <li v-for="item in file" :key="item.id">
                    <div 
                    class="flex-center"
                    :class="{'menu':true,'menu-active':SelectId===item.id}" 
                    @click="handleSelect(item)"
                    >
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    {{item.name}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="flex-right scrollbar">
            <div v-for="item in file" :key="item.id" :class="{'full-h':item.id===SelectId}">
                <div class="file-box" v-if="item.id===SelectId">
                    <div class="flex-between">
                        <div class="file-title">
                            {{item.name}}
                        </div>
                        <div class="flex-center">
                            <!-- <div class="pointer newFolder">新建文件夹</div> -->
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link pointer">
                                    视图 {{item.viewMode.des}}
                                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item 
                                    v-for="item1 in viewMode" 
                                    :key="item1.id" 
                                    @click="handleViewMode(item,item1)">
                                    {{item1.des}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="file-box-1 scrollbar" @contextmenu.stop="openFileMenu($event,item.key)">
                        <div 
                        v-if="item.child.length" 
                        :class="{'file-box-grid':item.viewMode.id==='0','file-box-list':item.viewMode.id==='1'}">
                            <div
                            :class="{'inline-icon-grid':item.viewMode.id==='0','inline-icon-list':item.viewMode.id==='1'}"
                            v-for="item1 in item.child"
                            :key="item1.id"
                            @dblclick="handleOpen(item1)"
                            @contextmenu.stop="openIconMenu($event,item1)"
                            :appId='item1.id'>
                                <div>
                                    <p>
                                        <img
                                        draggable="false"
                                        :src="item1.icon" 
                                        :alt="item1.name">
                                    </p>
                                    <p>{{item1.name}}</p>
                                </div>
                                <div style="color:#9d9c9c" class="oneline" v-if="item.viewMode.id==='1'">
                                    {{item1.createdAt}}
                                </div>
                            </div>
                        </div>
                       
                        <el-empty
                        v-else
                        :image-size="400"
                        :image="require('@/assets/empty.png')"/>
                    </div>
                    
                </div>
            </div>
            
          
        </div>
        <teleport to=".wallpaper">
            <desktop-menu 
            :left='fileMenu.left' 
            :top='fileMenu.top' 
            :visible='fileMenu.visible'
            @refresh='init'
            @createFolder='createFolder'>
            </desktop-menu>
            <icon-menu :value='iconMenu.appData' :left='iconMenu.left' :top='iconMenu.top' :visible='iconMenu.visible'></icon-menu>
        </teleport>
        
    </div>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import files from '@/hook/files'
import menu from '@/hook/menu'
import { toRefs } from 'vue'
import DesktopMenu from '@/components/DesktopMenu'
import IconMenu from '@/components/IconMenu'

export default {
  name: 'FileManage',
  components: { DesktopMenu,IconMenu },
  props: {
  },
  emits: [],
  setup(props,context) {

        const filesHook = files(context)


        return {
            ...filesHook,
            ArrowRight,
            ...toRefs(menu()),
        }
  }
}

</script>
<style lang='scss' scoped>
.flex-box {
    height: calc(100% - 55px);
    border-top: 1px solid $grey_1;
}
.flex-left {
    // flex:1;
    width: 160px;
    border-right: 1px solid $grey_1;
    height: 100%;

    li {
        padding: 5px;
        margin-right: 5px;

        .menu {
            width: 100%;
            padding: 8px;
            cursor: pointer;
            text-align: center;
            background-color: $grey_1;
            border-radius: 5px;
            transition: all .1s;
            font-size: $fontSmall;

            i {
                margin-right: 6px;
            }

            &:hover {
                background-color: $grey_2;
                // color: $white;
            }
        }
        .menu-active {
            background-color: $PrimaryColor !important;
            color: $white;
        }
    }
}



.flex-right {
    flex:9;
    height: 100%;
    padding: 15px 20px;
    width: 300px;
    overflow: hidden;

    .file-box {
        min-width: 300px;
        height: 100%;

        .file-title {
            font-size: 20px;
            font-weight: 600;
        }

        .newFolder {
            margin-right: 20px;
            font-size: $fontSmall;
            color: #606266;

            &:hover {
                color: #000;
            }
        }
    }
    .file-box-1 {
        height: calc(100% - 27px);
        min-width: 300px;
        overflow: auto;
        margin-top: 15px;

        .file-box-grid {
            display: grid;
            justify-items: center;
            grid-template-columns:repeat(10,1fr);
            // grid-template-rows: 70% 100%;
            margin-top: 5px;
            // grid-template-rows: repeat(10,1fr);
        }

        .file-box-list {
            display: flex;
            flex-direction: column;
            margin-top: 5px;
        }
    }
}

.inline-icon-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    max-width: 90px;
    padding: 5px;
    margin: 10px;
    cursor: pointer;
    background-color: transparent;
    border-radius: 5px;
    // overflow: hidden;

    div {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
            font-size: 13px;
            color: $PrimaryTextColor;
            @include ellipsis(2);
            width: 100px;
            padding: 5px 5px;

            img {
                height: 40px;
                width: 40px;
            }
        }
    }

    &:hover {
        background-color: rgba(196, 196, 196, 0.4);
    }

    &:active {
        background-color: rgba(165, 164, 164, 0.6);
    }
}

.inline-icon-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    cursor: pointer;
    background-color: transparent;
    border-radius: 5px;
     margin-right: 150px;

    div {
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        p {
            font-size: 13px;
            color: $PrimaryTextColor;
            @include ellipsis(1);
            width: 100px;
            padding: 5px 5px;
            text-align: left;


            img {
                height: 40px;
                width: 40px;
            }
        }
    }

    &:hover {
        background-color: rgba(196, 196, 196, 0.4);
    }

    &:active {
        background-color: rgba(165, 164, 164, 0.6);
    }
}
</style>
